<template lang="html">
  <div class="musicNav">
    <div class="nav">
      <ul>
        <router-link to="/infocenter" tag="li">
          <a href="#" class="item">
            <img src="../assets/images/icon-list.png" alt="">
          </a>
        </router-link>
        <li>
          <a href="#">
          我的
          </a>
        </li>
        <li>
          <a href="#">
            乐库
          </a>
        </li>
        <li>
          <a href="#">
          发现
          </a>
        </li>
        <li>
          <a href="#"  class="item">
            <img src="../assets/images/fangda.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"musicNav",
  data(){
    return{

    }
  }
}
</script>

<style scoped>
.nav{
  height: 90px;
  line-height: 90px;
  background: #632598;
  /* padding-left: 0.3rem; */
}
.nav ul{
  display: flex;
  /* flex-direction: row; */
  /* align-items: center; */
  justify-content: cesnter;
  flex-grow: 1;
  width: 100%;
  padding-left: 0.56rem;
}
.nav ul li{
  float: left;
  margin-right: 0.7rem;
  vertical-align: middle;
  box-sizing: border-box;
}
.nav ul li a {
  display: block;
  /* margin-right: 0.77rem; */
  font-size: 0.4rem;
  font-weight: 300;
  color: #ffffff;
}
.nav ul li img{
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
}
.item{
  box-sizing: border-box;
  /* padding-top: 0.06rem; */
}

</style>
